<template>

  <div class="main">
    <a-space direction="vertical" :size="16" class="grid">
      <a-row justify="start">
        <a-col :span="2" ><a-input v-model="carouselQuery.pageName" placeholder="隶属样片"  /></a-col>
        <a-col :span="2" class="row"><a-input v-model="carouselQuery.subject" placeholder="轮播图主题" /></a-col>
        <a-col :span="1" class="row"><a-button type="outline" @click="getList" >查询</a-button></a-col>
      </a-row>
    </a-space>

    <a-row justify="start" style="padding: 0 10px">
        <a-space size="small">
          <a-col :span="1"><a-button type="primary" @click="handleClick" >新增</a-button></a-col>
          <a-col :span="1"><a-button type="outline" @click="deleteClick(null)" status="danger" :disabled="selectList.length == 0">删除</a-button></a-col>
        </a-space>
    </a-row>

    <a-table :data="data" row-key="id" :row-selection="selectList"
             :scroll="scroll" :scrollbar="scrollbar"
             v-model:selectedKeys="selectList" :pagination="false"
             style="background-color: white;">
      <template #columns>
        <a-table-column title="编号" data-index="id"></a-table-column>
        <a-table-column title="隶属样片编号" data-index="pageName"></a-table-column>
        <a-table-column ellipsis="true" title="主题" data-index="subject"></a-table-column>
        <a-table-column ellipsis="true" title="上传人" data-index="updateBy"></a-table-column>
        <a-table-column title="图片" data-index="file[0].clientUrl">
          <a-table-column title="封面图片" data-index="file[0].clientUrl">
            <template #cell="{record}">
              <a-image :src=" url + record.file[0].clientUrl" width="80" height="80"></a-image>
            </template>
          </a-table-column>
        </a-table-column>
        <a-table-column title="更新时间" data-index="updateTime"></a-table-column>

        <a-table-column title="操作">
          <template #cell="{record}">
            <a-button type="text" @click="updateClick(record)">修改</a-button>
            <a-button type="text" @click="deleteClick(record)" status="danger">删除</a-button>
          </template>
        </a-table-column>
      </template>

      <template #footer>
        <a-pagination v-model:current="carouselQuery.pageNum" :total="carouselQuery.total"
                      v-model:page-size="carouselQuery.pageSize" @page-size-change="getList"
                      @change="getList"
                      show-total show-jumper show-page-size/>
      </template>
    </a-table>

    <CarouselFormData
        ref="sampleFormData"
        v-model:vis="visible"
        v-model:dto="carouselDto"
        v-model:tit="title"
        v-model:api="api"
        v-model:src="src"
        @ok="getList"
    ></CarouselFormData>

  </div>

</template>

<script lang="ts" setup>


import type {CarouselDto, CarouselQuery} from "@/apis/sample/carousel";
import type {Reactive} from "vue-demi";
import {ref} from 'vue';
import type {Ref} from "vue-demi";

import CarouselFormData from "@/views/sample/carousel/CarouselFormData.vue";
import {useUserStore} from "@/stores";
import {delCarouse, getCarouselById, getCarouselListByCondition} from "@/apis/sample/carousel";
import {delUser} from "@/apis/sample/user";
import {Notification} from "@arco-design/web-vue";


const selectList = ref([])
const data:Ref<CarouselDto[]> = ref([])
const visible = ref(false);
const src:Ref<string> = ref("")



const url = import.meta.env.VITE_API_BASE_URL;

const title = ref('')
const scrollbar = ref(true);
const api = ref('')
const scroll = {
  x: 1200,
  y: 650
};



const carouselQuery:Reactive<CarouselQuery> = reactive({
  id:null,
  pageName: null,
  subject:null,
  updateBy:null ,
  pageNum:1,
  pageSize: 10,
  total:0,
})

const carouselDto:Reactive<CarouselDto> = reactive({
  id:0,
  pageName: '',
  updateBy:useUserStore().userInfo.id,
  subject:'',
  ossId:'',
  updateTime:''
})

/**
 * 新增按钮
 * */
const handleClick = () => {
  visible.value = true;
  title.value = '添加轮播图列表'
  api.value= 'add'

}

/**
 * 修改按钮
 * */
const updateClick = (data:any) => {
  title.value = '修改轮播图列表'
  api.value= 'up'

  if (data == '0'){
    up(selectList.value)
  }else {
    up(data.id)
    src.value = url +  data.file[0].clientUrl
  }

  visible.value = true;

}

/**
 *  删除按钮
 * */
const deleteClick = (data:any) => {

  if (data == null){

    delCarouse(selectList.value).then(res =>{
      Notification.success({
        title: "删除成功",
        content: "删除成功",
        duration: 2000
      })
      getList()
    })

  }else {
    delCarouse([data.id]).then(res => {
      Notification.success({
        title: "删除成功",
        content: "删除成功",
        duration: 2000
      })
      getList()
    })
  }

}

/**
 * 获得列表
 * */
const getList =  () => {

  getCarouselListByCondition(carouselQuery).then(res =>{
    data.value = res.data.data.records
    carouselQuery.total = res.data.data.total
  })

}

const up = (data:any) =>{

  getCarouselById(data).then(res =>{
    carouselDto.id = res.data.data.id
    carouselDto.pageName = res.data.data.pageName
    carouselDto.subject = res.data.data.subject
    carouselDto.ossId = res.data.data.ossId

  })

}



getList()
</script>

<style lang="scss" scoped>
.group {
  .img {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 10px;
  }
  display: flex;
}

.grid {
  .row {
    margin: 0 10px;
  }
  margin: 10px;
  padding: 10px;
  background-color: white;
}
</style>